<template>
  <div class="water-supply-brands">
    <div class="trapezoidal-panel">
      <div class="trapezoidal-panel__row">
        <div class="trapezoidal-panel__col">
          <div class="trapezoidal-panel__item">
            <div class="trapezoidal-panel__item--top">
              <div class="trapezoidal-panel__item__value">{{ value1 }}</div>
              <div class="trapezoidal-panel__item__unit">m³</div>
            </div>
            <div class="trapezoidal-panel__item--bottom">市政总管给水</div>
          </div>
        </div>
        <div class="trapezoidal-panel__col">
          <div class="trapezoidal-panel__item">
            <div class="trapezoidal-panel__item--top">
              <div class="trapezoidal-panel__item__value">{{ value2 }}</div>
              <div class="trapezoidal-panel__item__unit">mpa</div>
            </div>
            <div class="trapezoidal-panel__item--bottom">市政总管供水压力</div>
          </div>
        </div>
        <div class="trapezoidal-panel__col">
          <div class="trapezoidal-panel__item">
            <div class="trapezoidal-panel__item--top">
              <div class="trapezoidal-panel__item__value">{{ value3 }}</div>
              <div class="trapezoidal-panel__item__unit">m³</div>
            </div>
            <div class="trapezoidal-panel__item--bottom">楼层供水量</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import deviceHospitalApi from '@admin/views/Monitor/Source/api/hospital/api.js'

export default {
  name: 'WaterSupplyBrands',
  data() {
    return {
      value1: 0,
      value2: 0,
      value3: 0,
    }
  },
  mounted() {
    deviceHospitalApi.getSummary({ systemTag: 1 }).then((res) => {
      this.value1 = res.value1
      this.value2 = res.value2
      this.value3 = res.value3
    })
  },
}
</script>

<style lang="scss">
@import '@admin/views/Monitor/Source/trapezoidal-panel.scss';
</style>

<style lang="scss" scoped>
@import './index.scss';
</style>
